<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"
      integrity="sha256-QvgynZibb2U53SsVu98NggJXYqwRL7tg3FeyfXvPOUY="
      crossorigin="anonymous"
    ></script>
    <title>Document</title>
  </head>
  <style>
    div {
      height: 800px;
      float: left;
    }
  </style>
  <body>
    <div class="chart1" style="width: 935px"></div>
    <div class="chart2" style="width: 950px"></div>
    <script>
      let dom = document.querySelector(".chart1");
      let dom2 = document.querySelector(".chart2");
      let myChart1 = echarts.init(dom);
      let myChart2 = echarts.init(dom2);
      //   myChart1.setOption({
      //     title: {
      //       text: "柱状图",
      //     },
      //     legend: {
      //       data: ["日期"],
      //     },
      //     xAxis: {
      //       data: ["裤子", "袜子", "鞋子", "书包", "日用品", "家居", "电子参评"],
      //     },
      //     yAxis: {},
      //     series: [
      //       {
      //         name: "日期",
      //         data: [
      //           120,
      //           { value: 200, itemStyle: { color: "#a90000" } },
      //           150,
      //           80,
      //           70,
      //           110,
      //           130,
      //         ],
      //         type: "bar",
      //         showBackground: true,
      //         backgroundStyle: {
      //           color: "rgba(180, 180, 180, 0.2)",
      //         },
      //       },
      //     ],
      //   });

      myChart2.setOption({
        title: {
          text: "并状图\n展示",
          link: "https://www.baidu.com/",
          target: "self",
          textStyle: {
            color: "green",
            fontStyle: "italic",
            fontSize: "30",
            textBorderColor: "#3c3c",
            textShadowColor: "red",
            textShadowBlur: 2,
            textShadowOffsetX: 4,
          },
          subtext: "我是富dsfsdfsd sdfasdfasdfsdfsdfsdf 文本",
          sublink: "https://www.taobao.com/",
          subtarget: "self",
          subtextStyle: {
            width: 90,
            color: "red",
            align: "right",
            verticalAlign: "middle",
            textBorderWidth: 40,
            textBorderType: "solid",
            textBorderType: [5, 10],
            textBorderDashOffset: 5,
            textShadowColor: "black",
            textShadowBlur: 2,
            textShadowOffsetX: 2,
            overflow: "truncate",
          },
          textAlign: "left",
          textVerticalAlign: "middle",
        },
        legend: {
          data: ["用户来源"],
        },
        series: [
          {
            name: "用户来源",
            data: [
              { value: 12, name: "电视" },
              { value: 40, name: "广告" },
              { value: 30, name: "抖音" },
              { value: 10, name: "B站" },
            ],
            type: "pie",
            roseType: "angle",
          },
        ],
      });
    </script>
  </body>
</html>
